<template>
	<view class="content">
		<view class="box_bg"
			:style="'background: url('+ c_imgPath + 'chouka/indexBg.png'+ ') repeat-y 0 0 / 100% auto;'">

		</view>
		<view v-for="(item,index) in listdata" :key="index" class="qbt_con_item" @click="openList(item.goods_list)">
			<view class="list_1">
				<image :src="item.goods.imgurl"></image>
			</view>
			<view class="bom_text">
				<view class="bom_text_title">{{item.goods.title}}</view>
				<view class="bom_text_desc">所属IP：{{item.goods.category_tile}}</view>
				<view class="bom_text_desc">试玩次数：{{item.goods.count}}次</view>
			</view>
		</view>
		<!-- 奖品弹窗 -->
		<uni-popup ref="jp_show" type="center" :isMaskClick="false" mask-background-color="rgba(0,0,0,.95)">
			<view class="pop_jp ">
				<!-- <view class="pop_jp_title">
					<image :src="c_imgPath + 'chouka/title_img.png'"></image>
				</view> -->
				<view class="jp_title_1"
					:style="'background: url('+ c_imgPath + 'chouka/list_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="jp_list_box">
						<view class="jp_list" v-for="(v,i) in jp_arr" :key='i' @click="yulan(v,i)"
							:animation="animationMain">
							<!-- @click="kaiqi_jp(v.kaiqi,i)" -->
							<!-- z_imgPath+ 'bei.png 'chouka/jp_bg.png' mode="aspectFit"-->
							<view class="jp_img"
								:style="'background: url('+ c_imgPath+ v.color +') no-repeat 0 0 / 100% 100%;'">
								<image :src=" v.goodslist_imgurl"></image>
							</view>
							<view class="jp_shang_title hang1"> {{v.goodslist_title}}</view>
							<view class="jp_prize_num">{{v.shang_name}} x1</view>
						</view>
					</view>
				</view>
				<view class="jp_btn">
					<view class="jp_btn_box" @click="inkace()"
						:style="'background: url('+ c_imgPath + 'chouka/jp_btn_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 详情弹窗 -->
		<uni-popup ref="yulanPop" type="center" mask-background-color="rgba(0,0,0,.95)">
			<swiper :indicator-dots="false" :autoplay="false" :duration="500" :current="current_index"
				style="width: 540rpx;height: 1000rpx;">
				<swiper-item v-for="(v,i) in yulanList" :key="i">
					<view class="yulanStyle"
						:style="'background: url('+ c_imgPath + 'detail/ylBg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						<view class="yulanStyle_title">
							<text>{{v.shang_name}}</text>
						</view>
						<view>
							<image style="width: 466rpx;height: 654rpx;" :src="v.goodslist_imgurl" mode="widthFix">
							</image>
						</view>
					</view>
					<view class="hang1 bomText"
						style="margin-top: 50rpx;font-size: 28rpx;height: 68rpx;line-height: 68rpx; "
						:style="'background: url('+ c_imgPath + 'detail/textBg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						{{v.goodslist_title}}
					</view>
					<view class="hang1 bomText"
						style="margin-top: 30rpx;font-size: 28rpx;height: 68rpx;line-height: 68rpx; "
						:style="'background: url('+ c_imgPath + 'detail/textBg.png'+ ') no-repeat 0 0 / 100% 100%;'">
						参考价格:￥{{v.goodslist_money}}
					</view>
					<view class="shuoming_close" @click="$refs.yulanPop.close()">
						<image :src="c_imgPath + 'detail/close.png'"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				z_imgPath: this.$z_img + 'chouka/',
				c_imgPath: 'https://qt.yhemall.com/',
				downOption: {
					auto: false
				},
				listdata: [],
				keyword: '',
				jp_arr: [],
				yulanList: []

			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			inkace() {
				let that = this;
				that.$refs.jp_show.close()
			},
			openList(list) {
				this.jp_arr = list;
				this.$refs.jp_show.open();
			},
			yulan(e, a) {
				this.yulanList = [];
				this.current_index = 0
				this.yulanList.push(e);
				this.$refs.yulanPop.open();
			},
			loadData(pageNo) {
				// 模拟接口
				let that = this;
				that.req({
					url: 'sw_log',
					success(res) {
						if (res.status == 1) {
							that.listdata = res.data;
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}



	.yulanStyle image:nth-of-type(1) {
		width: 550rpx;
		/* height: 550rpx; */
		margin: 26rpx 25rpx;
	}

	.yulanStyle>view:nth-of-type(2) {
		// border: 10rpx solid #B07CDD;
		box-sizing: border-box;
		overflow: hidden;
	}

	.yulanStyle_title {
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 24rpx;
		margin: 36rpx 0 0 30rpx;
	}

	.yulanStyle>view:nth-of-type(1) {
		padding: 8rpx 26rpx;
		width: fit-content;
		position: absolute;
		font-size: 28rpx;

		text {
			font-family: Source Han Sans CN;
			font-weight: bold;
			background: linear-gradient(0deg, #B75AFF 0%, #E7CBFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.bomText {
		width: 360rpx;
		height: 68rpx;
		margin: auto;
		color: #FFFFFF;
		text-align: center;
	}

	.yulanStyle {
		width: 516rpx;
		font-size: 47rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;

		.shuoming_close {
			text-align: center;
			margin-top: 20rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}



	.jp_btn {
		margin-top: 50rpx;
		display: flex;
		align-items: center;

		.jp_btn_box {
			width: 230rpx;
			height: 68rpx;
			margin: auto;
			line-height: 68rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: bold;
		}

		.left {
			text {
				background: linear-gradient(180deg, #B55AFF 0%, #E5C7FF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.jp_prize_num {
		position: absolute;
		padding: 5rpx 10rpx;
		border-radius: 0px 20rpx 0px 0px;
		background-color: rgba(0, 0, 0, 0.6);
		text-align: center;
		font-size: 24rpx;
		bottom: 48rpx;
		left: 42rpx;
		color: #FFFFFF;
	}

	.jp_shang_title {
		box-sizing: border-box;
		background: linear-gradient(0deg, #A85AFF 0%, #E2E4FF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		padding: 2rpx 20rpx;
		text-align: center;
		font-weight: bold;
		margin-top: -30rpx;
	}

	.jp_img {
		/* position: absolute;
		top: 14rpx;
		left: 14rpx;
		box-sizing: border-box; */
		width: 195rpx;
		height: 270rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 130rpx;
			height: 190rpx;
		}
	}


	.jp_list {
		font-size: 24rpx;
		width: 210rpx;
		// height: 318rpx;
		margin: 20rpx 0;
		/* padding: 0 30rpx; */
		box-sizing: border-box;
		position: relative;
	}

	.jp_title_1>view:nth-child(3n+2) {
		/* margin: 20rpx 26rpx 0; */
	}

	.jp_list_box {
		width: 650rpx;
		max-height: 980rpx;
		margin: auto;
		overflow-y: scroll;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.jp_title_1 {
		width: 690rpx;
		max-height: 1020rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pop_jp_title {
		text-align: center;

		image {
			width: 430rpx;
			height: 124rpx;
		}
	}

	.pop_jp {
		width: 750rpx;
		padding-top: 200rpx;
		padding-bottom: 300rpx;
		overflow-y: scroll;
		box-sizing: border-box;
	}



	.content {
		width: 100vw;
		/* height: 100vh; */
		box-sizing: border-box;
		position: relative;
		background-attachment: fixed;
		position: relative;
	}

	.title_ipt {
		display: flex;
		align-items: center;
		margin: 20rpx auto;
		border-radius: 30rpx;
		padding-left: 30rpx;
		width: 652rpx;
		height: 64rpx;
		background: #999999;
		border-radius: 32rpx;
		box-sizing: border-box;
	}

	.title_ipt>image {
		width: 26rpx;
		height: 26rpx;
	}

	.title_ipt>input {
		width: 77%;
		height: 60rpx;
		box-sizing: border-box;
		border-radius: 105rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.6);
		padding-left: 20rpx;
	}

	.title_ipt>view {
		width: 94rpx;
		height: 35rpx;
		background: #B07CDD;
		border-radius: 18rpx;
		font-size: 23rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}



	.qbt_con_item {
		width: 630rpx;
		margin: 20rpx auto;
		padding: 30rpx;
		background: #0A091A;
		border: 1rpx solid;
		border-image: linear-gradient(0deg, #666666, #DDDDDD) 10 10;
		display: flex;
		align-items: center;
	}

	.list_1 {
		border-radius: 7rpx;
	}

	.list_1>image {
		width: 140rpx;
		height: 163rpx;
		border-radius: 7rpx;
	}

	.list_1>view:nth-of-type(1) {
		color: #FFFFFF;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.redu {
		width: 100%;
		padding: 6rpx 20rpx;
		box-sizing: border-box;
		height: 82rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		border-radius: 0 0 7rpx 7rpx;
	}

	.list_2 {
		padding: 20rpx;
		color: #FFFFFF;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		font-size: 28rpx;
		margin-top: 50rpx;
	}

	.list_2_text {
		font-size: 72rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		background: linear-gradient(0deg, #B2ADC6 0.78125%, #FFFFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.list_2>view:nth-of-type(2) {
		width: 130rpx;
		height: 38rpx;
		background: #B07CDD;
		border-radius: 18rpx;
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bom_text {
		line-height: 41rpx;
		margin-left: 20rpx;
	}

	.bom_text_title {
		flex: 1;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FFFFFF;
	}

	.bom_text_desc {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.6;
	}

	.bom_text_num {
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.bom_text_num text {
		color: #AB7DFF;
	}
</style>